<?php
    session_start();
    if(! isset($_SESSION['username'])) {
        header('Location:index.html');
    }

    ?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery.min.js"></script>
<title>公告效果</title>
<style type="text/css">
* {

margin:0px;
padding:0px;
font-family: "Helvetica Neue",HelveticaNeue,"Helvetica-Neue",Helvetica;
}
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*
*/
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*内容总区域的长度，自行控制*/
.timeline-block {
width:90%;
margin:0 auto;
}
/*title区域*/
.timeline-title-info {
display:-webkit-box;
display:-moz-box;
display:-0-box;
display:-ms-box;
display:box;
}
/*公告文字*/
.timeline-title {
color:#F67236;
margin-right:16px;
}
/*日期*/
.timeline-time {
-webkit-box-flex:1;
box-flex:1;
font-size: 10px;
}
/*内容区域*/
.timeline-info {
width:100%;
}
/*内容文字*/
.timeline-content {
border-left:1px solid #FBC0A6;
margin-left:10px;
padding-left:34px;
margin-top:10px;
margin-bottom:8px;
color:#999999;
font-size:12px;
position:relative;
min-height:66px;
}

.timeline-content::before {
content:'';
display:block;
position:absolute;
left:-3px;
right:-3px;
top:-3px;
width:5px;
height:5px;
border-radius:50%;
background:#F6763D;
}
.timeline-content::after {
content:'';
display:block;
position:absolute;
left:-3px;
right: -3px;
bottom:0px;
width:5px;
height:5px;
border-radius:50%;
background:#F6763D;
}
#bj{
margin:30px;
}


</style>
</head>
<?php include ('menu.php');?>
<body>
<br>
<br>
<br>

<?php
    //    1. 链接数据库
    header("content-type:text/html;charset=utf8");
include('conn.php');

   $sql_select = "select  * from qing order by id desc";
   ?>
    
   <?php
  
    foreach ( $conn->query($sql_select) as $row) {
        //2.执行sql  //3.data 解析
?>
<div id='bj'>
<div class="timeline-block">
        <!--标题-->
        <div class="timeline-title-info">
            <div class="timeline-title"><?=$row['zhou']?></div><div class="timeline-time"><?=$row['ss']?></div>
        </div>
        <!--内容-->
        <div class="timeline-info">
            <div class="timeline-content"><?=$row['md']?></div>
            
        </div>
    </div>
 </div>
<? }?>
<script>
  $(function() {
              // 1. 隐式迭代 给所有的按钮都绑定了点击事件
              $('.timeline-info').slideUp(0)
              $(".timeline-title-info").click(function() {
                 // 2. 当前的元素变化背景颜色
             // 3. 其余的兄弟去掉背景颜色 隐式迭代
              $(this).siblings(".timeline-info").slideToggle(2000);
               });
         })
    </script>
</body>
</html>
